<?xml version="1.0" encoding="UTF-8" ?>
<%@page import="javax.servlet.jsp.jstl.fmt.LocalizationContext"%>
<%@page import="java.util.ResourceBundle"%>
<%@page import="java.util.Calendar"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page import="org.jakim.entity.*"%>
<%@ page import="org.jakim.utils.*"%>
<%@page import="org.apache.taglibs.standard.tlv.JstlCoreTLV"%>
<%@page import="org.apache.taglibs.standard.tlv.JstlFmtTLV"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<fmt:setLocale value="en" />
<fmt:setBundle basename="org.jakim.messages.messages" var="msg"
	scope="session" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="../styles/main.css" rel="stylesheet" type="text/css">
<link href="../styles/wizard.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">

$(function() {
    $( "#modalForm" ).dialog({
      autoOpen: false,
      title: 'Dialog Title',
  	  height: 'auto',
  	  width: 'auto',
      modal: true,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#addButton" ).click(function() {
      $( "#modalForm" ).dialog( "open" );
    });
  });
  
</script>
</head>
<body style="overflow: auto;">
	<div id="divBodyContainer">
		<header>
			<article>
				<h1>
					<fmt:message key="PERSONALINFO.HEADER" />
				</h1>
				<p>
					<fmt:message key="PERSONALINFO.SUMMARY" />
				</p>
			</article>
		</header>
		
<%
	HttpSession httpSeesion = request.getSession();
	PersonalInforamation personalInfo = null;
	
	Object objPersonalInfo = httpSeesion.getAttribute("attrPersonalInfo");
	
	if (objPersonalInfo != null && 
			objPersonalInfo instanceof PersonalInforamation){
		personalInfo = (PersonalInforamation) objPersonalInfo;
%>
			<section class="wizardPersonalInfoBody">
				<table id="addedPersonalInfoTable" class="userEntriesTable">
					<tr>
						<th><fmt:message key="PERSONALINFO.TABLE.HEADER.LABEL" /></th>
					</tr>
	
					<tr>
						<td class="colParam">
						<fmt:message key="PERSONALINFO.FORM.NAME.LABEL" />:</td>
						<td class="colValue"><%=personalInfo.getUserName() %></td>
					</tr>
	
					<tr>
						<td class="colParam">
							<fmt:message key="PERSONALINFO.FORM.SIRNAME.LABEL" />:</td>
						<td class="colValue"><%=personalInfo.getUserSirName() %>
						</td>
					</tr>
	
					<tr>
						<td class="colParam">
						<fmt:message key="PERSONALINFO.FORM.ADDRESS.LABEL" />:</td>
						<td class="colValue">
						<%=personalInfo.getUserAddress().getStreetName() + " " %>
						<%=personalInfo.getUserAddress().getStreetNumber() + ". " %>
						<%=personalInfo.getUserAddress().getCityName() + ", " %>
						<%=personalInfo.getUserAddress().getStateName() %>
						</td>
					</tr>
	
					<tr>
						<td class="colParam"><fmt:message
								key="PERSONALINFO.FORM.NATIONALITY.LABEL" />:</td>
						<td class="colValue"><%=personalInfo.getUserNationality() %></td>
					</tr>
	
					<tr>
						<td class="colParam"><fmt:message
								key="PERSONALINFO.FORM.EMAIL.LABEL" />:</td>
						<td class="colValue"><%=personalInfo.getUserEmail() %></td>
					</tr>
	
					<tr>
						<td class="colParam"><fmt:message
								key="PERSONALINFO.FORM.PHONE.LABEL" />:</td>
						<td class="colValue"><%=personalInfo.getPhoneNumber() %></td>
					</tr>
					<tr>
						<td class="colParam">
						<fmt:message key="PERSONALINFO.FORM.BIRTHDATE.LABEL" />:</td>
						<td class="colValue"><%=personalInfo.getUserBirthDay() %></td>
					</tr>
					<tr>
						<td class="colParam">
						<fmt:message key="PERSONALINFO.FORM.GENDER.LABEL" />:</td>
						<td class="colValue"><%=personalInfo.getUserGender() %></td>
					</tr>
				</table>
				
			</section>
<% }  else { %>
			<button id="addButton">
				<fmt:message key="PERSONALINFO.ADDPERSONALINFO.BUTTON" />
			</button>
<% } %>			
			
			<div id="modalForm">
				<form id="formPersonalInfo" class="formExperience"
					action="../addinfo" method="post">
					<fieldset id="fsetPersonalInfo" class="fsetWizard">
						<legend>
							<fmt:message key="PERSONALINFO.FORM.LABEL" />:
						</legend>
						<div id="divFirstName">
							<label id="lblFirstName" for="txtFirstName"> 
								<fmt:message key="PERSONALINFO.FORM.NAME.LABEL" />:
							</label>
							<input type="text" id="txtFirstName" name="personalInfoFirstName" />
						</div>
	
						<div id="divSirName">
							<label id="lblSirName" for="txtSirName">
								<fmt:message key="PERSONALINFO.FORM.SIRNAME.LABEL" />:
							</label>
							<input type="text" id="txtSirName" name="personalInfoSirName" />
						</div>
	
						<div id="divPhoto">
							<label id="lblPhoto" for="imgPhoto"> 
								<fmt:message key="PERSONALINFO.FORM.PHOTO.LABEL" />:
							</label>
							<input type="image" id="imgPhoto" name="personalInfoPhoto" />
						</div>
	
						<div id="divNationality">
							<label id="lblNationality" for="txtNationality"> 
								<fmt:message key="PERSONALINFO.FORM.NATIONALITY.LABEL" />:
							</label>
							<input type="text" id="txtNationality" name="personalInfoNationality" />
						</div>
						
						<div id="divCity">
							<label id="lblCity" for="txtCity"> 
								<fmt:message key="PERSONALINFO.FORM.CITY.LABEL" />:
							</label>
							<input type="text" id="txtCity" name="personalInfoCity" />
						</div>
						
						<div id="divState">
							<label id="lblState" for="txtState"> 
								<fmt:message key="PERSONALINFO.FORM.STATE.LABEL" />:
							</label>
							<input type="text" id="txtState" name="personalInfoStateName" />
						</div>
	
						<div id="divStreetName">
							<label id="lblStreetName" for="txtStreetName"> 
								<fmt:message key="PERSONALINFO.FORM.STREETNAME.LABEL" />:
							</label>
							<input type="text" id="numberStreetName" name="personalInfoStreetName" />
						</div>
						
						<div id="divStreetNumber">
							<label id="lblStreetNumber" for="txtStreetNumber"> 
								<fmt:message key="PERSONALINFO.FORM.STREETNUMBER.LABEL" />:
							</label>
							<input type="text" id="txtStreetNumber" name="personalInfoStreetNumber" />
						</div>
						
						<div id="divApartment">
							<label id="lblApartment" for="txtApartment"> 
								<fmt:message key="PERSONALINFO.FORM.APARTMENT.LABEL" />:
							</label>
							<input type="number" id="numberApartment" name="personalInfoApartment" />
						</div>
						<br />
						
						<div id="divInfoFloorNumber">
							<label id="lblInfoFloorNumber" for="txtInfoFloorNumber"> 
								<fmt:message key="PERSONALINFO.FORM.FLOORNUMBER.LABEL" />:
							</label>
							<input type="text" id="txtInfoFloorNumber" name="personalInfoFloorNumber" />
						</div>
						
						<div id="divStreetNumber">
							<label id="lblZipNumber" for="txtZipNumber"> 
								<fmt:message key="PERSONALINFO.FORM.ZIP.LABEL" />:
							</label>
							<input type="text" id="txtZipNumber" name="personalInfoZipNumber" />
						</div>
						
						<div id="divBirthDate">
							<label id="lblBirthDate" for="dateBirthDate"> 
								<fmt:message key="PERSONALINFO.FORM.BIRTHDATE.LABEL" />:
							</label>
							<input type="date" id="dateBirthDate" name="personalInfoBirthDate" />
						</div>
						
						<div id="divEmail">
							<label id="lblEmail" for="emailEmail"> 
								<fmt:message key="PERSONALINFO.FORM.EMAIL.LABEL" />:
							</label>
							<input type="email" id="emailEmail" name="personalInfoEmail" />
						</div>
						

						<div id="divPhone">
							<label id="lblPhone" for="telPhone"> 
								<fmt:message key="PERSONALINFO.FORM.PHONE.LABEL" />:
							</label>
							<input type="tel" id="telPhone" name="personalInfoPhone" />
						</div>
						
						<div id="divFax">
							<label id="lblFax" for="telFax"> 
								<fmt:message key="PERSONALINFO.FORM.FAX.LABEL" />:
							</label>
							<input type="tel" id="telFax" name="personalInfoFax" />
						</div>
						
						<div id="divGender">
							<label id="lblGender"> 
									<fmt:message key="PERSONALINFO.FORM.GENDER.LABEL" />:
							</label >
							<div>
								<label id="lblMalee" for="radioMale"> 
									<fmt:message key="PERSONALINFO.FORM.GENDERMALE.LABEL" />:
								</label>
								<input type="radio" id="radioMale" name="personalInfoGender" />
							</div>
							
							<div>
								<label id="lblFemale" for="radioFemale"> 
									<fmt:message key="PERSONALINFO.FORM.GENDERFEMALE.LABEL" />: 
								</label>
								<input type="radio" id="radioFemale" name="personalInfoGender" />
							</div>
						</div>
						
						<input type="hidden" value="0" name="numberCVWizardStep" />
					</fieldset>
					
					<button type="submit">
						<fmt:message key="SUBMIT.BUTTON" />
					</button>
				</form>
			</div>
			<button id="next" onclick="window.location.href = 'jobhistorywizard.jsp'">
				<fmt:message key="NEXT.BUTTON" />
			</button>
	</div>
</body>
</html>